<template>
    <div class="login-container">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
            label-position="left">
            <div class="title-container">
                <h3 class="title">Login Form</h3>
            </div>
            <el-form-item prop="username">
                <span class="svg-container">
                    <svg-icon icon-class="user" />
                </span>
                <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text"
                    tabindex="1" auto-complete="on" />
            </el-form-item>
            <el-form-item prop="password">
                <span class="svg-container">
                    <svg-icon icon-class="password" />
                </span>
                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
                    placeholder="Password" name="password" tabindex="2" auto-complete="on"
                    @keyup.enter.native="handleLogin" />
                <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
            </el-form-item>
            <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
                @click.native.prevent="handleLogin">登录</el-button>
            <div class="tips">
                <el-button type="text" style="float: right;" @click="showDialog = true">注册</el-button>
            </div>
        </el-form>
        <el-dialog title="注册" :visible.sync="showDialog">
            <el-form :model="form">
                <el-form-item label="用户名" label-width="100px">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="100px">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="100px">
                    <el-radio v-model="form.radio" label="0">男</el-radio>
                    <el-radio v-model="form.radio" label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="出生日期" label-width="100px">
                    <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="getRegister">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { register } from '@/api/user';
export default {
    name: 'Login',
    data() {
        return {
            userdata: undefined,
            showDialog: false,
            loginForm: {
                username: 'zhangsan',
                password: '1'
            },
            loginRules: {
                username: [{
                    required: true, trigger: 'blur', validator: (rule, value, callback) => {
                        if (!value.trim()) {
                            callback(new Error('账号不为空'))
                        } else {
                            callback()
                        }
                    }
                }],
                password: [{
                    required: true, trigger: 'blur', validator: (rule, value, callback) => {
                        if (!value.trim()) {
                            callback(new Error('密码不为空'))
                        } else {
                            callback()
                        }
                    }
                }]
            },
            loading: false,
            passwordType: 'password',
            redirect: undefined,
            form: {
                username: undefined,
                password: undefined,
                radio: undefined,
                date: undefined
            }
        }
    },
    watch: {
        $route: {
            handler: function (route) {
                this.redirect = route.query && route.query.redirect
            },
            immediate: true
        }
    },
    mounted() {
        this.userdata = this.$store.getters.token
    },
    methods: {
        showPwd() {
            if (this.passwordType === 'password') {
                this.passwordType = ''
            } else {
                this.passwordType = 'password'
            }
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        handleLogin() {
            const data = {
                username: this.loginForm.username.trim(),
                userPassword: this.loginForm.password,
                loginType: 1
            }
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$store.dispatch('user/login', data).then(res => {
                        this.$message(res.errorMessage)
                        this.$router.push({ path: this.redirect || '/' })
                        this.loading = false
                    })
                } else {
                    return false
                }
            })
        },
        getRegister() {
            const data = {
                username: this.form.username.trim(),
                userPassword: this.form.password,
                userGender: this.form.radio,
                userBirthDay: this.form.date,
                uploadPictureStatus: 0
            }
            register(data).then(res => {
                this.$message(res.errorMessage)
                this.isLogin = true
                this.showDialog = false
            })
        },
        handleAvatarSuccess(res, file) {
            this.form.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style scoped>
@supports (-webkit-mask: none) and (not (cater-color: #fff)) {
    .login-container .el-input input {
        color: #fff;
    }
}

.login-container .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;
}

.login-container .el-input input {
    background: transparent;
    border: 0px;
    border-radius: 0px;
    padding: 12px 5px 12px 15px;
    color: #fff;
    height: 47px;
    caret-color: #fff;
}

.login-container .el-input input &:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #283443 inset !important;
    -webkit-text-fill-color: #fff !important;
}

.el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* background: rgba(0, 0, 0, 0.1); */
    border-radius: 5px;
    color: #454545;
}
</style>

<style scoped>
.login-container {
    min-height: 100%;
    width: 100%;
    background-color: #2d3a4b;
    overflow: hidden;
}

.login-container .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
}

.login-container .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
}

.login-container .tips span {
    &:first-of-type {
        margin-right: 16px;
    }
}

.svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
}

.title-container {
    position: relative;
}

.title-container .title {
    font-size: 26px;
    color: #eee;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
}

.show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>